<script setup lang="ts">
import router from '@/router'
import { message } from 'ant-design-vue'
import { DeleteOutlined, EditOutlined, SearchOutlined,ShareAltOutlined } from '@ant-design/icons-vue'
import { deletePicByIdUsingPost } from '@/api/fileController.ts'
import ShareModal from '@/components/ShareModal.vue'
import { ref } from 'vue'

const shareModalRef = ref()
const shareLink = ref<string>()

// 定义属性
interface Props {
  pictureList?: API.PictureVO[]
  loading?: boolean
  privateShow?: boolean
  onReload?: () => void
  canEdit?: boolean
  canDel?: boolean
}

// 接收父组件的传值
const props = withDefaults(defineProps<Props>(), {
  pictureList: () => [],
  loading: false,
  privateShow: false,
  canEdit: false,
  canDel: false,
})

// 跳转详情页方法
const toDetail = (item: API.PictureVO) => {
  // 确保item有id属性才跳转
  if (item && item.id) {
    router.push(`/picture/detail/${item.id}`)
  } else {
    message.warning('无法查看图片详情！')
  }
}

/**
 * 编辑
 * @param picture
 * @param e
 */
function doEdit(picture, e) {
  //阻止子组件的时间传播，触发卡片的点击事件，跳转到详情页
  e.stopPropagation()
  router.push({
    path: '/picture/addPicture',
    query: {
      id: picture.id,
      spaceId: picture.spaceId,
    },
  })
}

/**
 * 根据ID删除
 */
async function doDelete(picture, e) {
  //阻止子组件的时间传播，触发卡片的点击事件，跳转到详情页
  e.stopPropagation()
  const pictureId = picture.id
  const resp = await deletePicByIdUsingPost({ id: pictureId })
  if (resp.data.code === 0) {
    message.success('删除成功')
    //让外层刷新
    props.onReload?.()
  } else {
    message.error('删除失败')
  }
}

/**
 * 跳转到以图搜图页面
 */
function doPicSearch(picture, e) {
  //阻止子组件的时间传播，触发卡片的点击事件，跳转到详情页
  e.stopPropagation()
  const pictureId = picture.id
  router.push(`/picture/searchPicture/${pictureId}`)
}


// 分享
const doShare = (picture: API.PictureVO, e: Event) => {
  e.stopPropagation()
  shareLink.value = `${window.location.protocol}//${window.location.host}/picture/detail/${picture.id}`
  if (shareModalRef.value) {
    shareModalRef.value.handleOpen()
  }
}

</script>

<template>
  <!--  图片列表的组件-->
  <div id="picList">
    <a-list
      :grid="{ gutter: 16, xs: 1, sm: 2, md: 3, lg: 4, xl: 5, xxl: 6 }"
      :data-source="props.pictureList"
      :loading="props.loading"
    >
      <template #renderItem="{ item }">
        <a-list-item style="padding: 0">
          <!-- 单张图片，添加点击事件 -->
          <a-card hoverable @click="toDetail(item)">
            <template #cover>
              <img
                style="height: 180px; object-fit: cover; cursor: pointer"
                :alt="item.name"
                :src="item.thumbnailUrl ?? item.url"
              />
            </template>
            <a-card-meta :title="item.name">
              <template #description>
                <a-flex>
                  <a-tag color="green">
                    {{ item.category ?? '默认' }}
                  </a-tag>
                  <a-tag v-for="tag in item.tags" :key="tag">
                    {{ tag }}
                  </a-tag>
                </a-flex>
              </template>
            </a-card-meta>
            <template #actions v-if="props.privateShow">
              <a-space @click="(e) => doEdit(item, e)" v-if="canEdit">
                <EditOutlined></EditOutlined>
                编辑
              </a-space>
              <a-space @click="(e) => doDelete(item, e)" v-if="canDel">
                <DeleteOutlined></DeleteOutlined>
                删除
              </a-space>
              <!--              以图搜图功能-->
              <a-space @click="(e) => doPicSearch(item, e)">
                <SearchOutlined></SearchOutlined>
                搜索
              </a-space>
              <a-space @click="(e) => doShare(item, e)">
                <ShareAltOutlined></ShareAltOutlined>
                分享
              </a-space>
            </template>
          </a-card>
        </a-list-item>
      </template>
    </a-list>
    <ShareModal ref="shareModalRef" :link="shareLink"/>
  </div>
</template>

<style scoped></style>
